<template>
  <view v-if="show" :class="[isShow ? 'min-show' : 'min-hide', 'min-popup']">
    <view class="min-overlay"></view>
    <view :class="size ? 'min-content-' + size : 'min-content'" :style="{ height: heightSize + 'rpx' }">
      <slot />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean
    },
    size: {
      type: String
    },
    heightSize: {
      type: String
    }
  },
  data() {
    return {
      isShow: Boolean
    };
  },
  watch: {
    show() {
      this.isShow = this.show;
      if (!this.show) {
        this.close();
      }
    }
  },
  created() {
    this.isShow = this.show;
  },
  methods: {
    close() {
      this.isShow = false;
      setTimeout(() => {
        this.$emit('close');
      }, 200);
    }
  }
};
</script>

<style lang="scss" scoped>
.min-popup {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  &.min-hide {
    .min-content {
      animation: hide 0.2s linear forwards;
    }
    .min-overlay {
      opacity: 0;
    }
  }
  &.min-show {
    .min-content {
      animation: show 0.2s linear forwards;
    }
    .min-overlay {
      opacity: 1;
    }
  }
  .min-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 200;
    transition: 0.2s;
  }
  .min-content {
    width: 100%;
    height: 670rpx !important;
    background: #f3f3f3;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 300;
    border-radius: 10rpx;
    overflow: hidden;
  }
  .min-content-height {
    width: 100%;
    height: 600rpx;
    background: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 300;
    overflow: hidden;
  }
  @keyframes hide {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(100%);
    }
  }
  @keyframes show {
    0% {
      transform: translateY(100%);
    }
    100% {
      transform: translateY(0);
    }
  }
}
</style>
